const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 启动案例项目的webpack的配置文件
module.exports = {
    mode: "development",
    // 项目的入口
    entry: "./src/main.js",
    // 打包输入的配置
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "[name].js",
        library: {
            type: "umd", //  浏览器 | commonjs | es6
        }
    },
    // 模块加载器
    module: {
        rules: [
            // https://webpack.docschina.org/loaders/babel-loader/
            {
                test: /\.js$/,
                exclude: /node_modules/,
                // 如果需要给模块加载配置options，一般就用use
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            // https://webpack.docschina.org/loaders/css-loader/
            // https://webpack.docschina.org/loaders/style-loader/
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            // https://webpack.docschina.org/loaders/less-loader/
            {
                test: /\.less$/,
                //loader: 'less-loader', // 将 Less 文件编译为 CSS 文件
                use: ['style-loader', "css-loader", "less-loader"]
            },
            // https://vue-loader.vuejs.org/zh/guide/#手动设置
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // https://webpack.docschina.org/loaders/file-loader/
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },
        ]
    },
    // 别名和扩展名
    resolve: {
        extensions: ['.vue', ".js", ".json"],
        alias: {
            "@": path.resolve(__dirname, "../src"),
            "~": path.resolve(__dirname, "../components"),
        }
    },
    // 开发服务器
    // https://webpack.docschina.org/configuration/dev-server/
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3000
    },
    // 插件
    plugins: [
        new VueLoaderPlugin(),
        // 生成index.html的插件
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../index.html")
        })
    ],
}